<template>
  <el-dialog
    title="待办事项"
    width="1000"
    draggable
    overflow
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <div class="control">
      <el-input
        v-model="descriptionReport"
        placeholder="请输入关键字搜索"
        size="large"
        style="width: 240px"
      />
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column prop="name" label="用户名" width="80" />
      <el-table-column prop="type" label="事件类型" width="100" />
      <el-table-column prop="address" label="事件地址" />
      <el-table-column prop="signage" label="附近建筑" />
      <el-table-column prop="time" label="发生时间" />
      <el-table-column prop="describe" label="事件描述" />
    </el-table>
    <!-- 分页器 
          :current-page="currentPage" 当前页码
          :page-size="limit" 每页显示条数
          :total="props.modalData.attrValues.length" 总条数
          @current-change="handleCurrentChange" 切换页码时触发
    -->
    <el-pagination
      size="small"
      background
      layout="prev, pager, next"
      :page-size="limit"
      :total="middleData.length"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script setup>
import { ref,computed } from 'vue'
// 拿到父组件传过来的todoData
const props =defineProps({
  todoData:{
    type:Object
  }
})

// 分页逻辑
const limit = 4
const middleData = ref([])
const currentPage = ref(1)
// 更新currentPage
const handleCurrentChange = (val) => {
  currentPage.value = val
}

const descriptionReport = ref('') // 输入框的值
/* 表格的数据由以下计算属性得到*/
const tableData = computed({ // 表格的数据
  get: () => {
    // 如果输入框有值，则过滤数据
    let filterData = props.todoData
    if (descriptionReport.value) {
      filterData = props.todoData.filter(
        (item) =>
          item.name.includes(descriptionReport.value) ||
          item.type.includes(descriptionReport.value) ||
          item.address.includes(descriptionReport.value) ||
          item.signage.includes(descriptionReport.value) ||
          item.describe.includes(descriptionReport.value)
      )
    }
    middleData.value = filterData
    const start = (currentPage.value - 1) * 4
    const end = start + limit
    return filterData.slice(start, end)
  },
  set: (val) => {
    console.log(val)
  },
})

// 定义组件发给父组件的事件
const emit = defineEmits(['ToDoEventAdd'])
// 某一行的点击事件
function handleRowClick(row) {
  //row就是当前行的数据
  console.log(row)
  emit('ToDoEventAdd', row) // 触发父组件的事件，并传当前行的数据
}

</script>

<style scoped>
.control {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
